<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="1200px"
      append-to-body
      :before-close="close"
    >
      <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
          <el-form-item label="订单号" prop="orderId">
            <el-input v-model="queryParams.orderId" placeholder="" clearable style="width: 240px"
                      @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="启用禁用" prop="billEnableStates">
            <el-select v-model="queryParams.billEnableStates" placeholder="请选择" clearable>
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="list" ref="table">
          <!-- <el-table-column label="房间编号" align="center" prop="houseId" /> -->
          <el-table-column label="订单号" align="center" prop="orderId"/>
          <el-table-column label="房间" align="center" prop="premisesAddress"/>
          <el-table-column label="账单类型" align="billType" prop="orderId" width="100" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.bill_type" :value="scope.row.billType"></dict-tag>
            </template>
          </el-table-column>

          <el-table-column label="账单周期" align="center" prop="checkInTime" width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.billStartTime && scope.row.billEndTime">{{ scope.row.billStartTime|formatDate('YYYY/MM/DD') }} 至 {{ scope.row.billEndTime|formatDate('YYYY/MM/DD') }}</span>
              <span v-else>暂无数据</span>
            </template>
          </el-table-column>
          <el-table-column label="账单生成日期" align="center" prop="billCreateTime">
            <template slot-scope="scope">
              <span v-if="scope.row.billCreateTime">{{ scope.row.billCreateTime|formatDate('YYYY/MM/DD') }}</span>
              <span v-else>暂无数据</span>
            </template>
          </el-table-column>
          <el-table-column label="是否生效" align="center" prop="billEffectiveStates" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.billEffectiveStates == 1">生效</span>
              <span v-if="scope.row.billEffectiveStates == 2">未生效</span>
            </template>
          </el-table-column>
          <el-table-column label="是否启用" align="center" prop="billEnableStates" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.billEnableStates == 1">启用</span>
              <span v-if="scope.row.billEnableStates == 2">禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" @click="handlDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </el-dialog>
    <!--  详情  -->
    <Detail v-model="detailVisible" :data="form" title="账单详情" @success="getList"/>
  </div>
</template>

<script>
import { debounce } from '@/utils'
import { getHouseBill, listInvalidHouseBill } from '@/api/bill/houseBill'
import Detail from './detail'

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      default: '账单详情'
    },
    data: {
      default: () => ({})
    }
  },
  components: {
    Detail
  },
  dicts: ['pay_state','bill_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: [],
      // 表单参数
      form: {},
      //详情弹窗
      detailVisible:false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: undefined,
        billEnableStates: undefined,
      },
      voucherVisible: false,
      rules: {
        payVoucher: [
          { required: true, message: '请上传处理凭证', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val) // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      this.reset()
      this.getList()
    },
    handleQuery() {
      this.getList()
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        orderId: undefined,
        billEnableStates: undefined,
      }
      this.resetForm('queryForm')
    },
    resetQuery() {
      // this.dateRange = [];
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 查询房间列表 */
    getList() {
      this.loading = true
      listInvalidHouseBill(this.queryParams).then((response) => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 详情按钮操作 */
    handlDetail(row) {
      getHouseBill(row.billId).then((response) => {
        this.form = { ...response.data }
        this.detailVisible = true
      })
    },
    close() {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}

</style>
